<template>
    <div class="entries-container fade-in">
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <h2 class="page-title">
                        <el-icon class="title-icon">
                            <Document />
                        </el-icon>
                        报名记录
                    </h2>
                    <p class="page-subtitle">管理所有比赛报名信息和费用记录</p>
                </div>
                <el-button type="primary" class="add-button" @click="showAddDialog = true">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加报名记录
                </el-button>
            </div>
        </div>

        <div class="stats-cards">
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon total">
                        <el-icon><Document /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ entries.length }}</div>
                        <div class="stat-label">总记录数</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon paid">
                        <el-icon><CircleCheck /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ paidCount }}</div>
                        <div class="stat-label">已缴费</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon unpaid">
                        <el-icon><Clock /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">{{ unpaidCount }}</div>
                        <div class="stat-label">未缴费</div>
                    </div>
                </div>
            </el-card>
            <el-card class="stat-card">
                <div class="stat-content">
                    <div class="stat-icon total-fee">
                        <el-icon><Money /></el-icon>
                    </div>
                    <div class="stat-info">
                        <div class="stat-number">¥{{ totalFee }}</div>
                        <div class="stat-label">总费用</div>
                    </div>
                </div>
            </el-card>
        </div>

        <el-card class="table-card">
            <template #header>
                <div class="card-header">
                    <span>报名记录列表</span>
                    <div class="header-actions">
                        <el-input
                            v-model="searchQuery"
                            placeholder="搜索姓名或比赛项目"
                            class="search-input"
                            clearable
                            prefix-icon="Search"
                        />
                        <el-button type="primary" plain @click="importData" class="import-btn">
                            <el-icon><Upload /></el-icon>
                            导入数据
                        </el-button>
                        <el-button type="primary" plain @click="exportData" class="export-btn">
                            <el-icon><Download /></el-icon>
                            导出数据
                        </el-button>
                    </div>
                </div>
            </template>
            
            <el-table 
                :data="filteredEntries" 
                style="width: 100%" 
                :stripe="true" 
                :border="false"
                class="entries-table"
                v-loading="loading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 0.8)">
                <el-table-column prop="name" label="姓名" min-width="100">
                    <template #default="{ row }">
                        <div class="name-cell">
                            <el-avatar :size="32" :src="row.avatar" class="user-avatar">
                                {{ row.name.charAt(0) }}
                            </el-avatar>
                            <span class="name-text">{{ row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="competition" label="比赛项目" min-width="120">
                    <template #default="{ row }">
                        <el-tag type="info" effect="plain" class="competition-tag">
                            {{ row.competition }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="fee" label="报名费" min-width="100">
                    <template #default="{ row }">
                        <span class="fee-amount">¥{{ row.fee.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="paymentDate" label="缴费日期" min-width="120">
                    <template #default="{ row }">
                        <span class="date-text">{{ formatDate(row.paymentDate) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" min-width="100">
                    <template #default="{ row }">
                        <el-tag 
                            :type="row.status === '已缴费' ? 'success' : 'warning'" 
                            effect="light"
                            class="status-tag">
                            <el-icon class="status-icon">
                                <CircleCheck v-if="row.status === '已缴费'" />
                                <Clock v-else />
                            </el-icon>
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <div class="action-buttons">
                            <el-button type="primary" size="small" @click="editEntryHandler(row)" class="action-btn">
                                <el-icon><Edit /></el-icon>
                                编辑
                            </el-button>
                            <el-button type="danger" size="small" @click="deleteEntry(row)" class="action-btn">
                                <el-icon><Delete /></el-icon>
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog 
            v-model="showAddDialog" 
            title="添加报名记录" 
            width="600px" 
            class="add-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form :model="newEntry" :rules="formRules" ref="formRef" label-width="100px" class="entry-form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="newEntry.name" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="比赛项目" prop="competition">
                            <el-input v-model="newEntry.competition" placeholder="请输入比赛项目" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="报名费" prop="fee">
                            <el-input-number 
                                v-model="newEntry.fee" 
                                :min="0" 
                                :precision="2" 
                                :step="10" 
                                placeholder="请输入报名费"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="newEntry.status" style="width: 100%">
                                <el-option label="已缴费" value="已缴费" />
                                <el-option label="未缴费" value="未缴费" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="缴费日期" prop="paymentDate">
                    <el-date-picker 
                        v-model="newEntry.paymentDate" 
                        type="date" 
                        placeholder="选择日期" 
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input 
                        v-model="newEntry.remark" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入备注信息（可选）" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showAddDialog = false">取消</el-button>
                    <el-button type="primary" @click="addEntry" :loading="submitting">确定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑报名记录对话框 -->
        <el-dialog 
            v-model="showEditDialog" 
            title="编辑报名记录" 
            width="600px" 
            class="edit-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form :model="editEntry" :rules="formRules" ref="editFormRef" label-width="100px" class="entry-form">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="editEntry.name" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="比赛项目" prop="competition">
                            <el-input v-model="editEntry.competition" placeholder="请输入比赛项目" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="报名费" prop="fee">
                            <el-input-number 
                                v-model="editEntry.fee" 
                                :min="0" 
                                :precision="2" 
                                :step="10" 
                                placeholder="请输入报名费"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="editEntry.status" style="width: 100%">
                                <el-option label="已缴费" value="已缴费" />
                                <el-option label="未缴费" value="未缴费" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="缴费日期" prop="paymentDate">
                    <el-date-picker 
                        v-model="editEntry.paymentDate" 
                        type="date" 
                        placeholder="选择日期" 
                        style="width: 100%" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input 
                        v-model="editEntry.remark" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入备注信息（可选）" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showEditDialog = false">取消</el-button>
                    <el-button type="primary" @click="updateEntry" :loading="submitting">保存修改</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导出数据对话框 -->
        <el-dialog 
            v-model="showExportDialog" 
            title="导出数据" 
            width="500px" 
            class="export-dialog"
            :close-on-click-modal="false">
            <div class="export-content">
                <div class="export-description">
                    <p>请选择要导出的数据格式：</p>
                    <p class="export-info">当前将导出 {{ filteredEntries.length }} 条记录</p>
                </div>
                
                <div class="export-options">
                    <el-radio-group v-model="exportFormat" class="export-format-group">
                        <el-radio value="excel" class="export-option">
                            <div class="export-option-content">
                                <div class="export-icon excel">
                                    <el-icon><Document /></el-icon>
                                </div>
                                <div class="export-text">
                                    <div class="export-title">Excel格式</div>
                                    <div class="export-desc">适合数据分析和进一步处理</div>
                                </div>
                            </div>
                        </el-radio>
                        
                        <el-radio value="csv" class="export-option">
                            <div class="export-option-content">
                                <div class="export-icon csv">
                                    <el-icon><Document /></el-icon>
                                </div>
                                <div class="export-text">
                                    <div class="export-title">CSV格式</div>
                                    <div class="export-desc">通用格式，兼容性最好</div>
                                </div>
                            </div>
                        </el-radio>
                        
                        <el-radio value="pdf" class="export-option">
                            <div class="export-option-content">
                                <div class="export-icon pdf">
                                    <el-icon><Document /></el-icon>
                                </div>
                                <div class="export-text">
                                    <div class="export-title">PDF格式</div>
                                    <div class="export-desc">适合打印和正式文档</div>
                                </div>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showExportDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleExport">
                        <el-icon><Download /></el-icon>
                        开始导出
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 导入数据对话框 -->
        <el-dialog 
            v-model="showImportDialog" 
            title="导入数据" 
            width="500px" 
            class="import-dialog"
            :close-on-click-modal="false">
            <div class="import-content">
                <div class="import-description">
                    <p>请选择要导入的Excel文件：</p>
                    <p class="import-info">支持.xlsx格式，文件应包含：姓名、比赛项目、报名费、状态、缴费日期等字段。系统会智能合并数据，相同姓名和比赛项目的记录将被更新。</p>
                </div>
                
                <div class="import-upload">
                    <el-upload
                        ref="uploadRef"
                        :auto-upload="false"
                        :show-file-list="false"
                        :on-change="handleFileChange"
                        accept=".xlsx,.xls"
                        drag>
                        <el-icon class="el-icon--upload"><Upload /></el-icon>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传xlsx/xls文件，且不超过10MB
                            </div>
                        </template>
                    </el-upload>
                </div>

                <div v-if="importFile" class="import-file-info">
                    <el-icon><Document /></el-icon>
                    <span>{{ importFile.name }}</span>
                    <span class="file-size">({{ (importFile.size / 1024 / 1024).toFixed(2) }}MB)</span>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showImportDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleImport" :disabled="!importFile">
                        <el-icon><Upload /></el-icon>
                        开始导入
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Plus, Document, CircleCheck, Clock, Money, Search, Download, Edit, Delete, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useEntriesStore } from '../stores/entries'
import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import 'jspdf-autotable'

const entriesStore = useEntriesStore()
const entries = computed(() => entriesStore.entries)
const loading = ref(false)
const submitting = ref(false)
const searchQuery = ref('')
const formRef = ref(null)
const editFormRef = ref(null)

const showAddDialog = ref(false)
const showEditDialog = ref(false)
const newEntry = ref({
    name: '',
    competition: '',
    fee: 0,
    paymentDate: '',
    status: '未缴费',
    remark: ''
})

const editEntry = ref({
    id: null,
    name: '',
    competition: '',
    fee: 0,
    paymentDate: '',
    status: '未缴费',
    remark: ''
})

// 表单验证规则
const formRules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '姓名长度在2到20个字符之间', trigger: 'blur' }
    ],
    competition: [
        { required: true, message: '请输入比赛项目', trigger: 'blur' }
    ],
    fee: [
        { required: true, message: '请输入报名费', trigger: 'blur' },
        { type: 'number', min: 0, message: '报名费不能为负数', trigger: 'blur' }
    ],
    status: [
        { required: true, message: '请选择状态', trigger: 'change' }
    ]
}

// 统计数据
const paidCount = computed(() => entries.value.filter(entry => entry.status === '已缴费').length)
const unpaidCount = computed(() => entries.value.filter(entry => entry.status === '未缴费').length)
const totalFee = computed(() => entries.value.reduce((sum, entry) => sum + entry.fee, 0).toFixed(2))

// 过滤数据
const filteredEntries = computed(() => {
    if (!searchQuery.value) return entries.value
    const query = searchQuery.value.toLowerCase()
    return entries.value.filter(entry => 
        entry.name.toLowerCase().includes(query) || 
        entry.competition.toLowerCase().includes(query)
    )
})

// 格式化日期
const formatDate = (date) => {
    if (!date) return '-'
    return new Date(date).toLocaleDateString('zh-CN')
}

const addEntry = async () => {
    if (!formRef.value) return
    
    try {
        await formRef.value.validate()
        submitting.value = true
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        entriesStore.addEntry({
            ...newEntry.value,
            id: Date.now(),
            avatar: null
        })
        
        showAddDialog.value = false
        ElMessage.success('添加成功')
        
        // 重置表单
        newEntry.value = {
            name: '',
            competition: '',
            fee: 0,
            paymentDate: '',
            status: '未缴费',
            remark: ''
        }
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的信息')
    } finally {
        submitting.value = false
    }
}

const editEntryHandler = (row) => {
    // 复制数据到编辑表单
    editEntry.value = {
        id: row.id,
        name: row.name,
        competition: row.competition,
        fee: row.fee,
        paymentDate: row.paymentDate,
        status: row.status,
        remark: row.remark || ''
    }
    showEditDialog.value = true
}

const updateEntry = async () => {
    if (!editFormRef.value) return
    
    try {
        await editFormRef.value.validate()
        submitting.value = true
        
        // 模拟API调用延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        entriesStore.updateEntry(editEntry.value)
        showEditDialog.value = false
        ElMessage.success('修改成功')
        
        // 重置编辑表单
        editEntry.value = {
            id: null,
            name: '',
            competition: '',
            fee: 0,
            paymentDate: '',
            status: '未缴费',
            remark: ''
        }
    } catch (error) {
        console.error(error)
        ElMessage.error('请填写正确的信息')
    } finally {
        submitting.value = false
    }
}

const deleteEntry = (row) => {
    ElMessageBox.confirm(
        `确定要删除 ${row.name} 的报名记录吗？`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        entriesStore.deleteEntry(row.id)
        ElMessage.success('删除成功')
    })
}

// 导出功能
const showExportDialog = ref(false)
const exportFormat = ref('excel')

const exportData = () => {
    showExportDialog.value = true
}

const handleExport = () => {
    showExportDialog.value = false
    
    switch (exportFormat.value) {
        case 'excel':
            exportToExcel()
            break
        case 'csv':
            exportToCSV()
            break
        case 'pdf':
            exportToPDF()
            break
        default:
            exportToExcel()
    }
}

// 导出为Excel格式
const exportToExcel = () => {
    try {
        const data = filteredEntries.value.map(entry => ({
            '姓名': entry.name,
            '比赛项目': entry.competition,
            '报名费': entry.fee,
            '状态': entry.status,
            '缴费日期': formatDate(entry.paymentDate),
            '备注': entry.remark || '-',
            '创建时间': formatDate(entry.createTime)
        }))

        // 创建工作表数据
        const ws = XLSX.utils.json_to_sheet(data)
        
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, '报名记录')
        
        // 设置列宽
        const colWidths = [
            { wch: 10 }, // 姓名
            { wch: 15 }, // 比赛项目
            { wch: 10 }, // 报名费
            { wch: 8 },  // 状态
            { wch: 12 }, // 缴费日期
            { wch: 20 }, // 备注
            { wch: 12 }  // 创建时间
        ]
        ws['!cols'] = colWidths
        
        // 生成文件名
        const fileName = `报名记录_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.xlsx`
        
        // 下载文件
        XLSX.writeFile(wb, fileName)
        
        ElMessage.success('Excel文件导出成功')
    } catch (error) {
        console.error('导出Excel失败:', error)
        ElMessage.error('导出失败，请重试')
    }
}

// 导出为CSV格式
const exportToCSV = () => {
    try {
        const headers = ['姓名', '比赛项目', '报名费', '状态', '缴费日期', '备注', '创建时间']
        const data = filteredEntries.value.map(entry => [
            entry.name,
            entry.competition,
            entry.fee,
            entry.status,
            formatDate(entry.paymentDate),
            entry.remark || '',
            formatDate(entry.createTime)
        ])
        
        // 添加表头
        const csvContent = [headers, ...data]
            .map(row => row.map(cell => `"${cell}"`).join(','))
            .join('\n')
        
        // 添加BOM以支持中文
        const BOM = '\uFEFF'
        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
        
        // 创建下载链接
        const link = document.createElement('a')
        const url = URL.createObjectURL(blob)
        link.setAttribute('href', url)
        link.setAttribute('download', `报名记录_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.csv`)
        link.style.visibility = 'hidden'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        ElMessage.success('CSV文件导出成功')
    } catch (error) {
        console.error('导出CSV失败:', error)
        ElMessage.error('导出失败，请重试')
    }
}

// 导出为PDF格式
const exportToPDF = () => {
    try {
        const doc = new jsPDF()
        
        // 设置中文字体
        doc.addFont('https://cdn.jsdelivr.net/npm/noto-sans-sc@1.0.1/NotoSansSC-Regular.otf', 'NotoSansSC', 'normal')
        doc.setFont('NotoSansSC')
        
        // 标题
        doc.setFontSize(18)
        doc.text('报名记录表', 105, 20, { align: 'center' })
        
        // 统计信息
        doc.setFontSize(12)
        doc.text(`总记录数: ${entries.value.length}`, 20, 35)
        doc.text(`已缴费: ${paidCount.value}`, 20, 45)
        doc.text(`未缴费: ${unpaidCount.value}`, 20, 55)
        doc.text(`总费用: ¥${totalFee.value}`, 20, 65)
        
        // 表格数据
        const tableData = filteredEntries.value.map(entry => [
            entry.name,
            entry.competition,
            `¥${entry.fee}`,
            entry.status,
            formatDate(entry.paymentDate)
        ])
        
        // 表格列标题
        const headers = ['姓名', '比赛项目', '报名费', '状态', '缴费日期']
        
        // 生成表格
        doc.autoTable({
            head: [headers],
            body: tableData,
            startY: 80,
            styles: {
                fontSize: 10,
                cellPadding: 3
            },
            headStyles: {
                fillColor: [99, 102, 241],
                textColor: 255
            },
            alternateRowStyles: {
                fillColor: [248, 250, 252]
            }
        })
        
        // 生成文件名
        const fileName = `报名记录_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.pdf`
        
        // 下载文件
        doc.save(fileName)
        
        ElMessage.success('PDF文件导出成功')
    } catch (error) {
        console.error('导出PDF失败:', error)
        ElMessage.error('导出失败，请重试')
    }
}

// 导入功能
const showImportDialog = ref(false)
const importFile = ref(null)
const uploadRef = ref(null)

const importData = () => {
    importFile.value = null
    showImportDialog.value = true
}

const handleFileChange = (file) => {
    importFile.value = file.raw
}

const handleImport = () => {
    if (!importFile.value) {
        ElMessage.error('请选择要导入的文件')
        return
    }

    const reader = new FileReader()
    reader.onload = (event) => {
        try {
            const workbook = XLSX.read(event.target.result, { type: 'array' })
            const sheetName = workbook.SheetNames[0]
            const worksheet = workbook.Sheets[sheetName]
            const data = XLSX.utils.sheet_to_json(worksheet)

            if (data.length === 0) {
                ElMessage.warning('导入文件为空或没有数据')
                return
            }

            // 处理导入的数据，智能合并
            const processedEntries = []
            const existingEntries = [...entries.value] // 复制现有数据
            
            data.forEach(entry => {
                // 标准化数据格式
                const normalizedEntry = {
                    name: entry.姓名 || entry.name || '',
                    competition: entry.比赛项目 || entry.competition || '',
                    fee: parseFloat(entry.报名费 || entry.fee || 0),
                    status: entry.状态 || entry.status || '未缴费',
                    paymentDate: entry.缴费日期 || entry.paymentDate || '',
                    remark: entry.备注 || entry.remark || '',
                    avatar: null
                }
                
                // 检查是否已存在相同的记录（基于姓名和比赛项目）
                const existingIndex = existingEntries.findIndex(e => 
                    e.name === normalizedEntry.name && 
                    e.competition === normalizedEntry.competition
                )
                
                if (existingIndex !== -1) {
                    // 更新现有记录
                    existingEntries[existingIndex] = {
                        ...existingEntries[existingIndex],
                        ...normalizedEntry,
                        id: existingEntries[existingIndex].id // 保持原有ID
                    }
                } else {
                    // 添加新记录
                    processedEntries.push({
                        ...normalizedEntry,
                        id: Date.now() + Math.random().toString(36).substring(2, 15)
                    })
                }
            })
            
            // 合并现有数据和新数据
            const finalEntries = [...existingEntries, ...processedEntries]
            entriesStore.setEntries(finalEntries)
            ElMessage.success('导入成功，共处理 ' + data.length + ' 条记录')
            showImportDialog.value = false
        } catch (error) {
            console.error('导入失败:', error)
            ElMessage.error('导入失败，请检查文件格式或内容')
        }
    }
    reader.readAsArrayBuffer(importFile.value)
}

onMounted(() => {
    loading.value = true
    // 模拟加载延迟
    setTimeout(() => {
        loading.value = false
    }, 1000)
})
</script>

<style scoped>
.entries-container {
    animation: fadeIn 0.5s ease-out;
}

.page-header {
    margin-bottom: var(--spacing-xl);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.title-section {
    flex: 1;
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.title-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.add-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 500;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-icon.total {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.stat-icon.paid {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.stat-icon.unpaid {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.stat-icon.total-fee {
    background: linear-gradient(135deg, var(--danger-color), #f87171);
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.table-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.search-input {
    width: 250px;
}

.entries-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.name-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.user-avatar {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    font-weight: 600;
}

.name-text {
    font-weight: 500;
    color: var(--text-primary);
}

.competition-tag {
    border-radius: var(--radius-md);
    font-weight: 500;
}

.fee-amount {
    font-weight: 600;
    color: var(--danger-color);
    font-size: 1.1rem;
}

.date-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.status-tag {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.status-icon {
    font-size: 0.875rem;
}

.action-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.add-dialog {
    border-radius: var(--radius-xl);
}

.entry-form {
    padding: var(--spacing-lg) 0;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .stat-content {
        padding: var(--spacing-sm);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
}

/* 导出对话框样式 */
.export-dialog {
    border-radius: var(--radius-xl);
}

.export-content {
    padding: var(--spacing-md) 0;
}

.export-description {
    margin-bottom: var(--spacing-xl);
}

.export-description p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.export-info {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
}

.export-options {
    margin-bottom: var(--spacing-lg);
}

.export-format-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.export-option {
    margin: 0 !important;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.export-option:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}

.export-option.is-checked {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.export-option-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.export-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.export-icon.excel {
    background: linear-gradient(135deg, #217346, #1e6b3d);
}

.export-icon.csv {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

.export-icon.pdf {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.export-text {
    flex: 1;
}

.export-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.export-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .export-option-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .export-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* 导入和导出按钮样式 */
.import-btn,
.export-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    font-weight: 500;
}

.import-btn {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.import-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.export-btn {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.export-btn:hover {
    background: var(--success-dark);
    border-color: var(--success-dark);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.import-btn .el-icon,
.export-btn .el-icon {
    color: white;
}

/* 导入对话框样式 */
.import-dialog {
    border-radius: var(--radius-xl);
}

.import-content {
    padding: var(--spacing-lg) 0;
}

.import-description p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.import-info {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
}

.import-upload {
    margin: var(--spacing-lg) 0;
}

.import-file-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

.import-file-info .el-icon {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.file-size {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* 上传组件样式调整 */
.el-upload-dragger {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

.el-upload-dragger:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}

.el-icon--upload {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
}

.el-upload__text {
    color: var(--text-primary);
    font-size: 1rem;
}

.el-upload__text em {
    color: var(--primary-color);
    font-style: normal;
    font-weight: 600;
}

.el-upload__tip {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: var(--spacing-sm);
}
</style>